<!--
 * @Author: wuyuxin
 * @Date: 2022-03-19 12:59:58
 * @LastEditors: wuyuxin
 * @LastEditTime: 2022-03-19 13:18:45
 * @Description: 
-->
<template>
  <div>
    App
    <home></home>
    <suspense>
      <template #default>
        <AsyncCategory/>
      </template>
      <template #fallback>
        <Loading/>
      </template>
    </suspense>
  </div>
</template>

<script>
  import { defineAsyncComponent } from 'vue'
  import Home from './Home.vue'
  import Loading from './Loading.vue';
  // import AsyncCategory from './AsyncCategory.vue'
  // const AsyncCategory = defineAsyncComponent(() => import("./AsyncCategory.vue"))
  const AsyncCategory = defineAsyncComponent({
    loader: () => import("./AsyncCategory.vue"),
    // errorComponent,
    // 在显示loadingComponent组件之前, 等待多长时间
    delay: 2000,
    /**
     * err: 错误信息,
     * retry: 函数, 调用retry尝试重新加载
     * attempts: 记录尝试的次数
     */
    onError: function(err, retry, attempts) {

    }
  })
  export default {
    components: {
      Home,
      AsyncCategory
    }
  }
</script>

<style lang="scss" scoped>

</style>
